<template>
    <div class="header">
		<div class="div1">
			<aside class="a1">
            <span><router-link to="/pc/home">首页-星光百货</router-link></span>
        </aside>
		<div class="div2">
			<aside class="a2">
				<router-link v-show="$store.state.name==''" to="/adminlogin"><label>你好!</label>请登录</router-link>
				<router-link v-show="$store.state.name!='' && $store.state.role=='adm'" to="/admin/admhome"><label>你好!</label>{{$store.state.name}}</router-link>
                <router-link v-show="$store.state.name!='' && $store.state.role=='usr'" to="/user"><label>你好!</label>{{$store.state.name}}</router-link>
			</aside>
			<aside class="a3">
				<router-link to="/pc/userenroll">/ 免费注册</router-link>
			</aside>
		</div>
        <aside class="a4">
            <span @click="MyCart()"><router-link to="/">/ 我的购物车 /</router-link></span>
            <span @click="MyOrder()"><router-link to="/"> 我的订单 /</router-link></span>
        </aside>
        <div class="d1">
            <router-link to="/pc/home"><span @click="logout()">退出</span></router-link>
        </div>
		</div>
    </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
    name:'PCHeader',
    data(){
        return{
			
        }
    },
    methods:{
		...mapActions(['remove']),
		// 退出登录
		logout(){
			this.remove();
			window.localStorage.clear();
		},
		// 前往我的购物车
		MyCart(){
			this.$router.push({path:`/pc/mycart`})
		},
		// 前往我的订单
		MyOrder(){
			this.$router.push({path:`/pc/myorder`})
		},
	},
	mounted(){
		
	}
}
</script>

<style scoped>
.header{
    width: 99vw;
    height: 35px;
	line-height: 35px;
    background: #e6e6e6;
}
.header .div1{
	width: 100%;
	margin: 0 auto;
	display: flex;
    align-items: center;
}
.header a{
    color: #70bdff;
	font-weight: 500;
	font-size: 14px;
}
.header .d1 a{
	color: #7c7c7c;
	margin-left: 17vw;
}
.header .a1{
    width: 20vw;
    height: 35px;
    line-height: 35px;
    display: flex;
	margin-left: 12vw;
}
.header .a1 span a{
    color: #7c7c7c;
    font-weight: bold;
	font-size: 16px;
}
.header .div2{
	display: flex;
	margin-left: 16vw;
}
.header .div2 .a2{
	width: 150px;
	overflow: hidden;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}
.header .div2 .a2 label{
    color: #7c7c7c;
	font-size: 14px;
}
.header .div2 .a2 a{
	color: red;
}
.header .div2 .a3{
	margin-left: 20px;
}
.header .a4{
	margin-left: 10px;
}
</style>
